<%- include('../header.html') %>
<div class="main-wrap">

    <div class="crumb-wrap">
        <div class="crumb-list"><i class="icon-font"></i><a href='/carousel'>首页</a><span class="crumb-step">&gt;</span><span class="crumb-name">品牌管理</span></div>
    </div>
    <div class="result-wrap">
        <div class="show_result">
            <div class="show_result_inner"><img src=""><span></span></div>
        </div>
        <div class="show_info">
            <div class="show_info_inner">
                <div>确认删除吗？</div>
                <div>
                    <button id="confirm">确定</button>
                    <button id="cancel">取消</button>
                </div>
            </div>
        </div>
        <div class="result-title">
            <div class="result-list">
                <a href="/brand/add"><i class="icon-font"></i>添加品牌</a>
                <a id="batchDel" href="javascript:;"><i class="icon-font"></i>批量删除</a>
            </div>
        </div>
        <div class="result-content">
            <table class="result-tab" width="100%">
                <thead>
                <tr>
                    <th class="tc" width="5%"><input type="checkbox" name="selectall" id="selectall"></th>
                    <th>品牌名</th>
                    <th>品牌logo</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="brand">
                </tbody>
            </table>
            <div class="list-page">
                <button class="list_bottom_info_btn"><span id="count"></span> 条</button>
                <button class="list_bottom_info_btn">第 <span id="page"></span> 页</button>
                <button class="list_bottom_info_btn">共 <span id="allpage"></span> 页</button>
                <button class="list_bottom_info_btn" id="previous">上一页</button>
                <button class="list_bottom_info_btn" id="next">下一页</button>
            </div>
        </div>
    </div>
</div>
<!--/main-->
</div>

<!--_footer-->
<%- include('../footer.html') %>
<!-- javascripts-->
<script type="text/javascript" src="/operations/brand.js"></script>
<script type="text/javascript">
    "use strict"

    $(function () {
        brand.list.getBrand('1')

        //  批量选中的id
        function choosed() {
            let id_arr = []
            $("input[name='brand']:checked").each(function() {
                id_arr.push(parseInt($(this).val()))
            })
            return id_arr
        }

        //  批量删除
        $("#batchDel").click( function () {
            if (choosed().length <= 0) {
                $('.show_result').css('display', 'flex')
                $('.show_result_inner > span').html('请选择至少一条数据')
                $(".show_result_inner > img").attr("src", '/assets/images/onFocus.gif')
                setTimeout( function () {
                    $('.show_result').css('display', 'none')
                }, 1500)
            } else {
                $('.show_info').css('display', 'flex')
                $('#confirm').click( function () {
                    brand.list.delMoreBrand(choosed())
                    $('.show_info').css('display', 'none')
                })
                $('#cancel').click( function () {
                    $('.show_info').css('display', 'none')
                })
            }
        })

        //  全选、全不选
        $('input[name="selectall"]').click(function(){
            if($(this).is(':checked')){
                $('input[name="brand"]').each(function(){
                    $(this).prop('checked',true)
                })
            }else{
                $('input[name="brand"]').each(function(){
                    $(this).prop('checked',false)
                })
            }
        })

        //  下一页
        $('#next').click(function () {
            brand.list.getBrand(parseInt(brand.list.indexPage)+1)
        })

        //  上一页
        $('#previous').click(function () {
            brand.list.getBrand(parseInt(brand.list.indexPage)-1)
        })
    })
</script>
<script type="text/html" id="brand_list">
    [% if( list.length > 0 ){ %]
    [% for( var i=0; i< list.length; i++ ){ %]
    <tr>
        <td class="tc"><input name="brand" value="[%= list[i].id %]" type="checkbox" onclick="
                            let length=$('input[name=\'brand\']:checked').length,
                            len=$('input[name=\'brand\']').length

                            if (length===len) {
                            $('input[name=\'selectall\']').prop('checked',true)
                            }else{
                            $('input[name=\'selectall\']').prop('checked',false)
                            }"></td>
        <th>[%= list[i].name %]</th>
        <td><img src="[%= list[i].logo %]" width="150px"></td>
        <th>[%= list[i].des %]</th>
        <td>
            <a class="link-update" href="/brand/edit?id=[%= list[i].id %]">修改</a>
            <a class="link-del" href="javascript:;" onclick="
                                $('.show_info').css('display', 'flex')
                                $('#confirm').click( function () {
                                    brand.list.delOneBrand('[%= list[i].id %]')
                                    $('.show_info').css('display', 'none')
                                })
                                $('#cancel').click( function () {
                                    $('.show_info').css('display', 'none')
                                })
                            ">删除</a>
        </td>
    </tr>
    [% } %]
    [% } %]
</script>
<script type="text/html" id="brand_count">
    [%= count %]
</script>
<script type="text/html" id="brand_page">
    [%= page %]
</script>
<script type="text/html" id="brand_allpage">
    [%= allPage %]
</script>
</body>
</html>